<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01定位的简介</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;

        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: relative;
            left: 200px;
            top: -200px;
            
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
            
        }
        /* 
            定位position；是一种更加高级的布局手段
                通过定位，可以将元素摆放到页面任意位置
                使用position属性来设置定位
                    可选值：
                        static 默认值 元素是静止的，没有开启定位
                        relative 开启元素的相对定位
                        absolute 开启绝对定位
                        fix 开启固定定位
                        sticky 开启粘滞定位
                    相对定位：
                        语法： position:relative
                        特点：
                            1.不设置偏移量，所有元素不会发生任何变化
                            2.相对定位不改变元素属性，不会脱离文档流
                            3.相对定位的参考位置是它在文档流的位置
                            4.相对定位会提升元素的层次（覆盖某些层次的元素）
                            5.相对定位并不会改变元素的性质，行还是行，块还是块

                    


                    偏移量（offset）（偏移量驱使元素向中心移动）
                        当元素开启了偏移量后，设置的偏移量才会生效
                        top
                            定位元素和定位位置上边的距离
                        bottom
                            定位元素和定位位置底边的距离



        
        
        
        
        
        */








    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    
</body>
</html>